<template>
  <v-form
    ref="form"
    :lazy-validation="false"
  >
    <v-card flat>
      <v-card-text>
        <v-expansion-panels
          v-model="panel"
          multiple
          tile
        >
          <v-expansion-panel>
            <v-expansion-panel-header>
              <v-row justify="space-between" align="center" class="pr-12">
                <span>团费收入</span>
                <SelectTourfee :selected="selected" @change="handleChangeTourfee"/>
              </v-row>
            </v-expansion-panel-header>
            <v-divider />
            <v-expansion-panel-content>
              <el-table
                :data="tourfeeData"
                :summary-method="getSummaries"
                show-summary>
                <el-table-column
                  label="费用项目"
                  prop="name"
                  width="240">
                  <template slot="header">
                    <span class="mr-1">费用项目</span>
                    <small class="red--text">({{$t('other.required')}})</small>
                  </template>
                  <template slot-scope="{ row }">
                    <v-text-field
                      v-model="row.name"
                      outlined
                      single-line
                      hide-details
                      dense
                      :rules="[rules.required]"
                      required
                    ></v-text-field>
                  </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  prop="price"
                  label="单价">
                  <template slot="header">
                    <span class="mr-1">单价</span>
                    <small class="red--text">({{$t('other.required')}})</small>
                  </template>
                  <template slot-scope="{ row }">
                    <v-text-field
                      v-model.number="row.price"
                      type="number"
                      outlined
                      single-line
                      hide-details
                      dense
                      :rules="[rules.required]"
                      required
                      @input="inputTourfeeItem(row)"
                    ></v-text-field>
                  </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  prop="num"
                  label="数量">
                  <template slot="header">
                    <span class="mr-1">数量</span>
                    <small class="red--text">({{$t('other.required')}})</small>
                  </template>
                  <template slot-scope="{ row }">
                    <v-text-field
                      v-model.number="row.num"
                      type="number"
                      outlined
                      single-line
                      hide-details
                      dense
                      :rules="[rules.required]"
                      required
                      @input="inputTourfeeItem(row)"
                    ></v-text-field>
                  </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  prop="price_total"
                  label="金额">
                  <template slot-scope="{ row }">
                    <v-text-field
                      v-model="row.price_total"
                      outlined
                      single-line
                      hide-details
                      dense
                      readonly
                    ></v-text-field>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="remark"
                  label="备注">
                  <template slot-scope="{ row }">
                    <v-text-field
                      v-model="row.remark"
                      outlined
                      single-line
                      hide-details
                      dense
                    ></v-text-field>
                  </template>
                </el-table-column>
                <el-table-column
                  fixed="right"
                  :label="$t('other.action')"
                  width="80">
                  <template slot-scope="{ $index }">
                    <v-btn small color="warning" outlined @click="handleRmoveTourfee($index)">{{ $t('actions.delete') }}</v-btn>
                  </template>
                </el-table-column>
              </el-table>
              <v-row align="center">
                <div style="width: 140px;" class="text-right">团费说明：</div>
                <v-col class="pa-0">
                  <v-textarea
                    counter
                    rows="2"
                    no-resize
                    clearable
                    >
                  </v-textarea>
                </v-col>
              </v-row>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-card-text>
    </v-card>
  </v-form>
</template>

<script>
import SelectTourfee from '../components/select-tourfee'
export default {
  components: {
    SelectTourfee
  },
  data() {
    return {
      panel: [0],
      tourfeeData: [],

      rules: {
        required: value => !!value || 'required',
      }
    }
  },
  computed: {
    selected: {
      get() {
        return this.tourfeeData
      }
    }
  },
  methods: {
    // 添加费用项目
    handleChangeTourfee(selection) {
      this.tourfeeData.push(...selection.map(item => {
        return {
          name: item.name,
          price: '',
          num: '',
          price_total: '',
          remark: ''
        }
      }))
    },

    // 删除费用项目
    handleRmoveTourfee(index) {
      this.tourfeeData.splice(index, 1)
    },

    // 计算合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === 4 || index === 1 || index === 2) {
          sums[index] = '';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // sums[index] += ' 元';
        } else {
          sums[index] = '';
        }
      });

      return sums;
    },

    // 费用项目 计算总金额
    inputTourfeeItem(row) {
      row.price_total = (row.price || 0) * (row.num || 0)
    },
  }
}
</script>

<style>

</style>